$(function () {
  // 需求1:点击a链接 显示隐藏
  $('#loginBox a ').on('click', function () {
    // 点击登录框内部的a链接
    //显示的注册区域, 隐藏登陆区域
    $('#regBox').show()
    $('#loginBox').hide()
  })
  $('#regBox a').on('click', function () {
    // 点击的注册内部的a链接
    //显示的登录区域, 隐藏注册区域
    $('#loginBox').show()
    $('#regBox').hide()
  })

  // 需求2: 定义校验规则
  //   console.log(layui) 导入layui.all
  let form = layui.form
  form.verify({
    // 属性是校验名称,值是校验规则
    //值有两种类型,函数和数组!
    username: [/^[a-zA-Z0-9]{1,10}$/, `用户名必须1到10位数字和字母`],
    pwd: [/^[a-zA-Z0-9]{6,12}$/, `密码必须6到12位数字和字母`],
    rePwd: function (value) {
      //   value 就是你给那个标签添加这个校验规则
      //   这个标签的值就赋值给value
      let pwd = $('#regBox input[name=password]').val()
      // 如果原密码的值和确认密码的值不相等,就报错
      if (pwd != value) {
        return '两次密码输入不一致'
      }
    }
  })

  // 需求3:注册功能
  let layer = layui.layer
  $('#formReg').on('submit', function (e) {
    //   阻止表单默认提交
    e.preventDefault()
    // 发送axios
    axios({
      method: 'POST',
      url: '/api/reguser',
      // 不要传递对象类型,因为对象类型头部信息设置的是application/json
      //content-type:application/json,
      data: $(this).serialize() //a=1&b=2&c=3
    }).then((res) => {
      if (res.data.status !== 0) {
        return layer.msg(res.data.message)
      }
      layer.msg('注册成功!')
      //切换登录模块
      $('#regBox a').click()
      // 清空表单 DOM元素中 有一个reset()可以重置表单
      $('#formReg')[0].reset()
    })
  })

  // 需求4:登录功能
  $('#formLogin').on('submit', function (e) {
    // 阻止表单默认提交
    e.preventDefault()
    axios({
      method: 'POST',
      url: '/api/login',
      data: $(this).serialize()
    }).then(({ data: res }) => {
      if (res.status != 0) {
        return layer.msg(res.message)
      }
      layer.msg('登录成功')
      localStorage.setItem('token', res.token)
      location.href = `/index.html`
    })
  })
})
